<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name:'设置详情'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">{{projectDetail !== null ?projectDetail.subjectName : '' | truncate(4)}}</p>
            <div class="analyItemCon">
                <div class="clearfix">
                    <label class="fl pr8 cLightGray">主图</label>
                    <rx-viewer  class="fl ml10"  v-if=" projectDetail !== null && projectDetail.standardImgurl !== null" >
                        <div class="clearfix">
                            <div class="fl">
                                <img :src="projectDetail.standardImgurl | smallImg(60, 60)" >
                            </div>
                        </div>
                    </rx-viewer>
                    <rx-upload
                        v-if="isEdit"
                        class="fl ml10"
                        :data="{id: projectDetail.id}" :init="{class: 1, mime: 1}"
                        :elStyle="{width:'70px', height: '60px'}"
                        @success="successUpload">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                <div class="clearfix mt5">
                    <label class="fl pr8 cLightGray">副图</label>
                    <div  v-if="projectDetail !== null && projectDetail.photoList.length > 0" >
                        <rx-viewer  class="fl ml10"  :images="projectDetail.photoList">
                            <div class="clearfix">
                                <div class="fl mr10  relative " v-for="(item, index) of projectDetail.photoList" :key="index">
                                    <img :src="item | smallImg(60, 60)" >
                                </div>
                            </div>
                        </rx-viewer>
                    </div>
                    <div v-else-if="!isEdit && projectDetail !== null && projectDetail.photoList.length === 0">暂无图片</div>
                    <rx-upload
                        v-if="isEdit"
                        class="fl ml10"
                        :data="{id: projectDetail.id}" :init="{class: 9, mime: 1}"
                        :elStyle="{width:'70px', height: '60px'}"
                        @success="successUploadNew">
                        <div class="fl uiImgUpload uiImgUpload-gblock mr10">
                            <a href="javascript:">
                                <span type="file" value="" class="file"></span>
                                <em class="bgIcon file-ico"></em>
                            </a>
                        </div>
                    </rx-upload>
                </div>
                <div>
                    <p class="col-md-12 mt5">
                        <span class="cLightGray pr8 fl">内容</span>
                        <span v-if="!isEdit" class="fl" style="width: calc(100% - 50px);">{{projectDetail !== null  && projectDetail.hasOwnProperty('content') ? projectDetail.content : ''}}</span>
                        <textarea v-model="projectDetail.content"  class="col-md-10 h200" placeholder="请输入内容" v-else></textarea>
                    </p>
                    <p class="col-md-12 mt5">
                        <span class="cLightGray pr8 fl">描述</span>
                        <span v-if="!isEdit" class="fl" style="width: calc(100% - 50px);">{{projectDetail !== null && projectDetail.hasOwnProperty('description') ? projectDetail.description : ''}}</span>
                        <textarea v-model="projectDetail.description" class="col-md-10 h200" placeholder="请输入内容" v-else></textarea>
                    </p>
                    <p class="col-md-12 mt5">
                        <span class="cLightGray pr8 fl">标准</span>
                        <span v-if="!isEdit" class="fl" style="width: calc(100% - 50px);">{{projectDetail !== null &&  projectDetail.hasOwnProperty('standard') ? projectDetail.standard : ''}}</span>
                        <textarea v-model="projectDetail.standard" class="col-md-10 h200" placeholder="请输入内容" v-else></textarea>
                    </p>
                    <p class="col-md-12 mt5">
                        <span class="cLightGray pr8 fl">金额</span>
                        <span v-if="!isEdit">{{projectDetail !== null && projectDetail.hasOwnProperty('standard') ? projectDetail.money: ''}}</span>
                        <el-input v-model="projectDetail.money" placeholder="请输入内容" class="width150" type="number" v-else></el-input>
                    </p>
                </div>
                <div v-if="!isEdit" class="operButton">
                    <el-button type="primary" icon="el-icon-edit" circle @click="isEdit = true"></el-button>
                </div>
                <div v-else  class="operButton">
                    <el-button type="warning" icon="el-icon-close" circle @click="isEdit = false"></el-button>
                    <el-button type="success" icon="el-icon-check" circle @click="updateItem()"></el-button>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="fl col-md-9"></p>
            </div>
        </div>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getItemById, updateItem } from '../../Resources/Api/index'
export default {
    data () {
        return {
            isEdit: false, // 是否编辑
            delFlag: '', // 状态
            id: '',
            projectDetail: null // 回显详情
        }
    },
    created () {
        this.getItemById()
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 图片上传
        successUpload (value) {
            this.projectDetail.standardImgurl = value.src
        },
        // 附图上传
        successUploadNew (value) {
            this.projectDetail.photoList.push(value.src)
        },
        // 获取数据
        getItemById () {
            this.delFlag = this.leftInfo.delFlag
            this.id = this.leftInfo.id
            let params = {
                key: this.id
            }
            // 查询服务项科目
            getItemById(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.projectDetail = results.data.Body.item
                }
            }).catch(error => {
                console.log(error)
            })
        },
        updateItem () {
            let params = {
                userNo: this.userInfo.as_cardNo,
                userName: this.userInfo.as_fullName,
                item: {
                    id: this.id,
                    content: this.projectDetail.content,
                    description: this.projectDetail.description,
                    standardImgurl: this.projectDetail.standardImgurl,
                    standard: this.projectDetail.standard,
                    money: this.projectDetail.money
                },
                photoList: this.projectDetail.photoList
            }
            // 更新服务项科目
            updateItem(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.getItemById()
                }
            }).catch(error => {
                console.log(error)
            })
            this.isEdit = false
        }
    },
    watch: {
        leftInfo () {
            this.getItemById()
        }
    }
}
</script>
<style lang="scss">
    .operButton .el-button+.el-button {
        margin-left: 0px
    }
    .operButton {
        position:absolute;
        top: 50%;
        right: 10px;
        transform:translateY(-50%);
    }
    .width150{
        width: 150px;
    }
    .h200 {
        min-height: 120px;
        max-height: 150px;
    }
</style>
